import Image from '@/components/common/image'
import MyButton from '@/components/form/my-button'
import { AiOutlinePlus } from "react-icons/ai";
import Icon from '@/components/common/icon';
import { formatWithThousandsSeparator } from '@/utils/format/number';
import Link from '@/components/common/link';
import { getAuthorDetailUrl } from '@/utils/build-url/news';
import { Card } from '@/components/layout/card-list';

export interface INewsAuthorCardProps {
  id: number
  slug: string
  name: string
  avatarUrl: string
  intro: string
  subscribeCount: number
  tag: {
    slug: string
    name: string
  }[]
}
interface Props {
  obj: INewsAuthorCardProps
}
const AuthorCard = ({obj: {id, slug, name, avatarUrl, intro, subscribeCount, tag}}: Props) => {
  return (
    <Card disabled className='px-card-p-x md:px-card-p-x-md py-card-p-y md:py-card-p-y-md space-y-content-gap-y md:space-y-content-gap-y-md text-center'>
      <Image className='inline-block w-[60px]! h-[60px] rounded-full aspect-[1/1]!' src={avatarUrl} alt={name} />
      <p className='tip text-primary! line-clamp-1 text-txt-secondary'><span className='font-bold'>{formatWithThousandsSeparator(subscribeCount)}</span> 人订阅</p>
      <ul className='flex flex-wrap justify-center items-center gap-x-txt-gap-x md:gap-x-txt-gap-x-md gap-y-txt-gap-y md:gap-y-txt-gap-y-md'>
        {
          tag.map((item) => (
            <div key={item.slug} className='text-txt-secondary border border-primary rounded-full tag py-[2px] px-[8px] text-primary'>{item.name}</div>
          ))
        }
      </ul>
      <div className='space-y-txt-gap-y md:space-y-txt-gap-y-md'>
        <h3 className='line-clamp-1'>
          <Link className='hover:text-primary' href={getAuthorDetailUrl({language: 'zh', author: slug})}>{name}</Link>
        </h3>
        <p className='line-clamp-2'>{intro}</p>
      </div>
      
      <MyButton size='small' className='w-full rounded-full! mt-4' variant='secondary'>
        <Icon icon={AiOutlinePlus} className='text-primary' /> 订阅
      </MyButton>
    </Card>
  )
}

export default AuthorCard